
import { Form, Input, Radio, Select } from "antd"
import lessModule from "./index.module.less"
import { ChangeEvent, Fragment, useEffect, useState } from "react"
import { $eventBus, $EventBus_off, $EventBus_on, $JudgePortableDevice } from "../../../../../../../../../../common/utils"
// 主页-调试测试页面-便携设备接入页面-编辑弹窗组件-选择站点组件-地址组件
interface homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentMailingAddressComponentInterface {
    type: string
}
const HomePage_DebuggingAndTestingPage_PortableDeviceAccessPage_SelectSubstationComponent_MailingMailingAddressComponent: React.FC<homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentMailingAddressComponentInterface> = (props) => {
    const { Option } = Select;
    const [form] = Form.useForm()
    const [substationNameList, setSubstationNameList] = useState<Array<string>>([])
    const [infoCardStatus, setInfoCardStatus] = useState<string>("")
    const formItemList = [
        [
            {
                label: "主变位置",
                key: "dC1",
                type: "select",
                width: "calc((100% - 51px) / 2)"
            },
            {
                label: "通信地址",
                key: "dC1",
                type: "input",
                placeholder:"请输入",
                width: "calc((100% - 51px) / 2)"
            },
        ],
        [
            {
                label: "通信地址",
                key: "dC1",
                type: "input",
                placeholder:"请输入",
                width: "100%"
            },
        ]
    ]


// 广播函数数据
const eventBusFuncData = {
    homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponent_data:(data) => {
        setSubstationNameList([...data["substationNameList"]])
        setInfoCardStatus(data["MailingAddressStatus"])
    },
    // 提交操作
submitOperation: (data) => {
        form.validateFields().then((data) => {
            setTimeout(() => {
             $eventBus.emit("homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentMailingAddressComponent_data",data)   
            });

        })
    }
}
      useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])

    return (
        <div className={lessModule["homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentMailingAddressComponent"]}>
            {
                $JudgePortableDevice(props.type, <header className={lessModule["homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentMailingAddressComponent-header"]}>
                    <span className="homePage-required">*</span>
                    <span>选择选择安装主变位置</span>
                </header>, null)
            }
            <Form
                className={lessModule["homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentMailingAddressComponent-form"]}
                form={form}>

                {
                    formItemList[$JudgePortableDevice(props.type, 0, 1)].map((item, idx,) => (
                        <Form.Item key={`formItemItem${idx}`} className={lessModule["form-group__item"]} style={{ width: item["width"] }} label={item["label"]} name={item["key"]}
                            required={false}
                            rules={[{ required: true, message: item["placeholder"] }]}>
                            {
                                item["type"] === "select" && <Select showSearch >
                                    {[{ label: "#1" }].map((item) => (
                                        <Option key={item.label} value={item.label} disabled={false}>
                                            {item.label}
                                        </Option>
                                    ))}
                                </Select>
                            }
                            {
                                item["type"] === "input" && <Input placeholder={item["placeholder"]} />
                            }


                        </Form.Item>
                    ))
                }

            </Form>
        </div>
    )
}

export default HomePage_DebuggingAndTestingPage_PortableDeviceAccessPage_SelectSubstationComponent_MailingMailingAddressComponent